@keyframes bottomTopScale {
  0% {
    height: 0;
  }
  to {
    height: 100%;
  }
}

.cylinder-bar-chart {
  width: 100%;
  height: 100%;
  .chart-wrapper {
    width: calc(100% - 37px);
    height: 100%;
    position: relative;
    margin-left: 37px;

    .scale {
      position: absolute;
      left: -37px;
      top: 0;
      height: calc(100% - 38px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 25px;
      span {
        font-weight: bold;
        color: #a6b1bf;
        font-size: 12px;
        transform: scale(0.83);
        font-family: 'DINAlternate-Bold', 'DINAlternate';
      }
    }

    .content {
      height: 100%;
      position: relative;

      .line-list {
        position: absolute;
        height: calc(100% - 38px);
        width: 100%;
        top: 0;
        left: 0;
        .line {
          width: 100%;
          position: absolute;
          height: 1px;
          z-index: 10;
          .dash {
            width: 100%;
            height: 5px;
            margin-top: -2px;
            &.green {
              background-image: linear-gradient(
                to right,
                rgba(104, 231, 124, 0.29) 0%,
                rgba(104, 231, 124, 0.29) 50%,
                transparent 50%
              );
              background-size: 9px 1px;
              background-repeat: repeat-x;
            }
            &.yellow {
              background-image: linear-gradient(
                to right,
                rgba(255, 101, 31, 0.29) 0%,
                rgba(255, 101, 31, 0.29) 50%,
                transparent 50%
              );
              background-size: 9px 1px;
              background-repeat: repeat-x;
            }
          }

          &:hover {
            .dash {
              &.green {
                background-image: linear-gradient(
                  to right,
                  rgba(104, 231, 124, 1) 0%,
                  rgba(104, 231, 124, 1) 50%,
                  transparent 50%
                );
              }
              &.yellow {
                background-image: linear-gradient(
                  to right,
                  rgba(255, 101, 31, 1) 0%,
                  rgba(255, 101, 31, 1) 50%,
                  transparent 50%
                );
              }
            }

            .title {
              display: flex;
            }
          }
          .title {
            width: 80px;
            height: 21px;
            background: #ffffff;
            box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.05), 0px 4px 11px 0px rgba(0, 0, 0, 0.08),
              0px 2px 4px -3px rgba(0, 0, 0, 0.12);
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            position: absolute;
            right: -82px;
            top: -10px;
            display: none;
            // opacity: 0;
            // transition: opacity 0.5s ease-in-out;

            span {
              font-size: 12px;
              transform: scale(0.83);
              font-weight: 600;
              color: #4a69fd;
            }
          }
        }
      }

      .bar-list {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;

        height: 100%;
        .bar-item {
          height: 100%;
          min-width: 16px;
          max-width: 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          z-index: 11;
          position: relative;
          .bar-obj {
            width: 16px;
            height: calc(100% - 38px);
            background: #f4f5fd;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            flex: 0 0 auto;
            overflow: hidden;

            .active {
              width: 100%;
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              .cylinder {
                height: 0;
                background: linear-gradient(to bottom, #7d9ffe 0%, #4766fc 100%);
                border-radius: 8px;
                animation-name: bottomTopScale;
                animation-duration: 1s;
                animation-fill-mode: forwards;
              }
            }
          }
          .title {
            margin-bottom: 0px;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break: break-all;
            font-size: 12px;
            transform: scale(0.83);
            color: #a6b1bf;
            line-height: 14px;
          }
          .value {
            position: absolute;
            width: 36px;

            left: 50%;
            height: calc(100% - 38px);
            top: 0;
            margin-left: -18px;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            > div {
              height: 21px;
              box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.05), 0px 4px 11px 0px rgba(0, 0, 0, 0.08),
                0px 2px 4px -3px rgba(0, 0, 0, 0.12);
              background: #ffffff;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              left: 0;
              margin-bottom: 8px;
              width: 100%;
              span {
                font-size: 12px;
                transform: scale(0.83);
                font-weight: bold;
                font-family: 'DINAlternate-Bold', 'DINAlternate';
                color: #4a69fd;
              }
            }
          }
          &:hover {
            .value {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
